﻿@model People
@{
    ViewBag.Title = "Foreach";
}

<h2>Foreach</h2>

<p>The foreach binding duplicates a section of markup for each entry in an array, and binds each copy of that markup to the corresponding array item. This is especially useful for rendering lists or tables.</p>
<p><a href="http://knockoutjs.com/documentation/foreach-binding.html" target="_blank">http://knockoutjs.com/documentation/foreach-binding.html</a></p>

@Html.VisiTogglerFromPartial(CodeSamplePartials.FOREACH_VIEW_MODEL, Html.CreateVisiToggler("show the samples view model C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))
<br />
@Html.VisiTogglerFromPartial(CodeSamplePartials.FOREACH_CONTROLLER, Html.CreateVisiToggler("show the samples controller C# source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #1</h3>

<p>Using data-bind attribute</p>

@{
    var items = Html.Ko().KoAttrForeach(m => m.people);
    
<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody @items>
        <tr>
            <td @items.KoAttrText(m => m.firstName)></td>
            <td @items.KoAttrText(m => m.lastName)></td>
        </tr>
    </tbody>
</table>
}

@Html.VisiTogglerFromPartial(CodeSamplePartials.FOREACH1, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))

<h3>Sample #2</h3>

<p>Containerless control flow syntax</p>


<table>
    <thead>
        <tr><th>First name</th><th>Last name</th></tr>
    </thead>
    <tbody>
@using(var item = Html.Ko().KoForeach(m => m.people))
{
        <tr>
            <td @item.KoAttrText(m => m.firstName)></td>
            <td @item.KoAttrText(m => m.lastName)></td>
        </tr>
}
    </tbody>
</table>


@Html.VisiTogglerFromPartial(CodeSamplePartials.FOREACH2, Html.CreateVisiToggler("show the sample source code ", htmlAttributes: new { @class = "onright" }, options: VisiOptions.HiddenByDefault))


<p>&nbsp;</p>
<p>Next &gt; @Html.ActionLink("If", "If", "Examples")</p>
 
@Model.ApplyBindingsScript(KoBindingOptions.IncludeData)

